<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="formData.id" placeholder="请输入编号" clearable />
        </el-form-item>
        <el-form-item label="商品名称">
            <el-input v-model="formData.name" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="批量查询">
            <el-input v-model="formData.ids" placeholder="请输入商品编号" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="70" />
        <el-table-column prop="name" label="商品名称" width="120" />
        <el-table-column prop="img" label="商品图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img" width="60" height="60">
            </template>
        </el-table-column>
        <el-table-column prop="seq" label="排序" width="70" />
        <el-table-column prop="price" label="商品价格" width="70" />
        <el-table-column prop="categoryId" label="父ID" width="90" />
        <el-table-column fixed="right" label="操作" width="140">
            <template #default="scope">
                <el-button type="danger" size="small" @click="offineClick(scope.row)">下线</el-button>
                <el-button type="warning" size="small" @click="handleClick(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination :page-size="pageData.pageSize" :background="background" layout="total, prev, pager, next" :total="pageData.total"
        @current-change="currentChange" />
</template>
<script setup lang="ts">
import { CategoryApi,ProductApi } from '@/api'
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const route=useRoute()
const tableData = ref([])
const formData = reactive({
    id: '',
    name: '',
    ids: [],
})
const pageData = reactive({
    total: 0, //总条数
    pageNum: 1, //当前页
    pageSize: 3 //每页显示的条数
})

onMounted(() => {
    CallProductApi()
})

const CallProductApi = () => {
    let id = formData.id === '' ? undefined : formData.id
    let name = formData.name === '' ? undefined : formData.name
    let ids = formData.ids[0] === 0 ? undefined : formData.ids
    ProductApi.select.call({
        id: id, name: name, ids: ids,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        console.log(res);
        tableData.value = res.items
        pageData.total=res.total

    })
}
const currentChange = (num: number) => {
    console.log(`current page: ${num}`)
    pageData.pageNum = num
    CallProductApi()
}
const onSubmit = () => {
    console.log('submit!')
    //回调api接口
   CallProductApi()
}

const offineClick = (row:any) => { 
    ElMessageBox.confirm(
        '您确定要对：?'+row.name+" 下线吗？",
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 后台api接口
            ProductApi.delete.call({id:row.id}).then((res: any) => { 
                //console.log(res);
                
                ElMessage({
                    type: 'success',
                    message: '下线成功，感谢一路陪伴',
                })
                //对列表刷新
               CallProductApi()
            })
            
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '谢谢你手下留情！！',
            })
        })
}

const handleClick = (row: any) => {
    //跳转到指定的编辑页面去
    router.push({ name: 'product-edit', query: {id:row.id} })



}
</script>
<style scoped></style>